<template>
  <div style="padding:20px 20px 40px 20px">
      <div v-if="$route.query.id == undefined" style="font-weight:600;font-size:20px">{{`第 ${date.yearWeek} 周 ${date.startDate} 至 ${date.endDate} `}}</div>
      <div v-else style="font-weight:600;font-size:20px">{{`${form.userName} 第 ${form.yearWeek} 周 ( ${form.startDate} 至 ${form.endDate} ) `}}</div>
      <div style="text-align:right;display:flex;justify-content:flex-end">
          <el-button @click="$router.go(-1)" size="mini" type="primary">返回</el-button>
          <!-- <el-button v-if="see == false && $store.state.user.userId != form.userId" type="success" size="mini" @click="getComment()">已阅</el-button> -->
      </div>
      
      <el-card style="margin-top:6px">
        <div style="font-size:20px;font-weight:600">原计划-本周销售量</div>
        <el-table
            border
            show-summary
            :summary-method="getSummaries"
            :data="lastTabularData1"
            style="width: 100%;margin-top:12px">
            <el-table-column
                prop="subscript"
                align="center"
                width="80"
                label="排序">
            </el-table-column>
            <el-table-column
            align="center"
            prop="companyName"
            label="公司名称"
            >
            </el-table-column>
            <el-table-column
            prop="model"
            align="center"
            label="型号"
            >
            </el-table-column>
            <el-table-column
            align="center"
            width="140"
            prop="price"
            label="单价">
            </el-table-column>
            <el-table-column
                align="center"
                width="140"
                prop="number"
                label="总瓦数">
            </el-table-column>
            <el-table-column
                align="center"
                prop="symbol"
                label="货币单位">
            </el-table-column>
            <el-table-column
            align="center"
            prop="amount"
            label="总金额(当前币种)">
            </el-table-column>
            <el-table-column align="center" prop="conversion" label="换算金额(美元)"></el-table-column>
            <el-table-column
                prop="payStatus"
                align="center"
                label="付款方式">
            </el-table-column>
        </el-table>
      </el-card>
      <el-card>
          <div style="display:flex;justify-content:flex-start">
            <div style="font-size:20px;font-weight:600">实际-本周总销售量</div>
            <el-button v-if="see" style="margin-left:6px" size="mini" @click="add1" type="warning">新增</el-button>
          </div>
            <el-table
                border
                show-summary
                :summary-method="getSummaries"
                :data="tableData"
                style="width: 100%;margin-top:12px">
                <el-table-column
                    prop="subscript"
                    width="80"
                    align="center"
                    label="排序">
                </el-table-column>
                <el-table-column
                align="center"
                prop="companyName"
                label="公司名称"
                >
                <template slot-scope="scope">
                    <el-input v-model="scope.row.companyName"></el-input>
                </template>
                </el-table-column>
                <el-table-column
                prop="model"
                align="center"
                label="型号"
                >
                <template slot-scope="scope">
                    <el-input v-model="scope.row.model"></el-input>
                </template>
                </el-table-column>
                <el-table-column
                align="center"
                width="140"
                prop="price"
                label="单价">
                <template slot-scope="scope">
                    <el-input-number style="width:110px"  @change="amountChange(scope.row)" :step="0.01" :min="0" controls-position="right" v-model="scope.row.price"></el-input-number>
                </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    width="140"
                    prop="number"
                    label="总瓦数">
                    <template slot-scope="scope">
                        <el-input-number  style="width:110px" @change="amountChange(scope.row)"  :min="0" controls-position="right" v-model="scope.row.number"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="symbol"
                    label="货币单位">
                    <template slot-scope="scope">
                        <el-select  @change="syChange1(scope.row)" v-model="scope.row.symbol" placeholder="请选择">
                            <el-option
                            v-for="item in symbolSele"
                            :key="item.name"
                            :label="item.name"
                            :value="item.name">
                            </el-option>
                        </el-select> 
                    </template>
                </el-table-column>
                <el-table-column
                align="center"
                prop="amount"
                label="总金额(当前币种)">
                </el-table-column>
                <el-table-column align="center" prop="conversion" label="换算金额(美元)"></el-table-column>

                <el-table-column
                    prop="payStatus"
                    align="center"
                    label="付款方式">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.payStatus"></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="del1(scope.$index)" type="text">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
      </el-card>
      <el-card style="margin-top:10px">
          <div style="display:flex;justify-content:flex-start">
            <div style="font-size:20px;font-weight:600">下周预计销售量</div>
            <el-button v-if="see" style="margin-left:6px" size="mini" @click="add2" type="warning">新增</el-button>
          </div>
          <el-table
                border
                show-summary
                :summary-method="getSummaries"
                :data="tableData1"
                style="width: 100%;margin-top:12px">
                <el-table-column
                    prop="subscript"
                    width="80"
                    align="center"
                    label="排序">
                </el-table-column>
                <el-table-column
                align="center"
                prop="companyName"
                label="公司名称"
                >
                <template slot-scope="scope">
                    <el-input v-model="scope.row.companyName"></el-input>
                </template>
                </el-table-column>
                <el-table-column
                prop="model"
                align="center"
                label="型号"
                >
                <template slot-scope="scope">
                    <el-input v-model="scope.row.model"></el-input>
                </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    width="140"
                    prop="price"
                    label="单价">
                    <template slot-scope="scope">
                        <el-input-number style="width:110px" @change="amountChange1(scope.row)"  :min="0" controls-position="right" v-model="scope.row.price"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column
                align="center"
                prop="price"
                width="140"
                label="总瓦数">
                <template slot-scope="scope">
                    <el-input-number style="width:110px" @change="amountChange1(scope.row)"  :min="0" controls-position="right" v-model="scope.row.number"></el-input-number>
                </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="symbol"
                    label="货币单位">
                    <template slot-scope="scope">
                        <el-select @change="syChange(scope.row)" v-model="scope.row.symbol" placeholder="请选择">
                            <el-option
                            v-for="item in symbolSele"
                            :key="item.name"
                            :label="item.name"
                            :value="item.name">
                            </el-option>
                        </el-select> 
                    </template>
                </el-table-column>
                <el-table-column
                align="center"
                prop="amount"
                label="总金额(当前币种)">
                </el-table-column>
                <el-table-column align="center" prop="conversion" label="换算金额(美元)"></el-table-column>
                <el-table-column
                    prop="payStatus"
                    align="center"
                    label="付款方式">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.payStatus"></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="del(scope.$index)" type="text">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-card style="margin-top:10px">
                <div style="font-size:20px;font-weight:600">各市场情况反馈 (如国内外市场行情、政策变动、国家大事件影响等)</div>
                <Editor v-model="form.content1" />
            </el-card>
            <el-card style="margin-top:10px">
                <div style="font-size:20px;font-weight:600">竞争对手信息反馈（竞品价格、重大信息等）</div>
                <Editor v-model="form.content2" />
            </el-card>
            <el-card style="margin-top:10px">
                <div style="font-size:20px;font-weight:600">建议与所需支持（对自己、对部门机制、对各操作流程等）</div>
                <Editor v-model="form.content3" />
            </el-card>
      </el-card>
      <div style="text-align:center;margin-top:10px">
          <el-button v-if="see" @click="save()" type="primary">保存</el-button>
      </div>
    <el-dialog title="评语" :visible.sync="visComment">
      <el-form>
        <el-form-item label="周报评语:">
          <el-input type="textarea" v-model="form.comment"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visComment = false" size="mini"
          >取消</el-button
        >
        <el-button @click="sure()" type="primary" size="mini"
          >提交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Editor from '@/components/Editor';
import {add ,ed , detalii , commSure ,check ,weekDate ,exchange} from '@/api/weekly.js'
export default {
    components: {
        Editor
    },
    data () {
        return {
            visComment:false,
            see:true,
            tableData:[],
            date:{},
            tableData1:[],
            lastTabularData1:[],
            form:{
                content1:'',
                content2:'',
                content3:''
            },
            symbolSele:[
                {name:'美元$'},
                {name:'人民币￥'},
                {name:'欧元€'},
            ],
            rules:{
                companyName: [
                    { required: true, message: '请输入公司名称', trigger: 'blur' },
                ],
            model:[
                 { required: true, message: '请输入型号', trigger: 'blur' },
             ],
            }
        }
    },
    created () {
      if(this.$route.query.id){
        this.getEd()
      }
      weekDate().then(res => {
          if(res.code == 200){
              this.date = res.data
          }
      })
      if(this.$route.query.type){
        if(this.$route.query.type == 1){
            this.see = false
        }
      }
    },
    methods: {
        del(index) {
            this.tableData1.splice(index)
        },
        del1(index) {
            this.tableData.splice(index)
        },
        add1() {
            let data = {
                companyName:'',
                model:'',
                price:0,
                number:0,
                amount:0,
                payStatus:'',
                type:1,
                subscript:Number(this.tableData.length) + 1 ,
                rate:0,
                conversion:0,
                symbol:'美元$',
                index:  Number(this.tableData.length) + 1 
            }
            this.tableData.push(data)
        },
        add2() {
            let data = {
                companyName:'',
                model:'',
                price:0,
                amount:0,
                payStatus:'',
                type:2,
                conversion:0,
                symbol:'美元$',
                subscript:Number(this.tableData1.length) + 1 ,
                index:this.tableData1.length + 1,
                rate:0,
            }
            this.tableData1.push(data)
        },
        // 计算金额
        amountChange(row) {
            console.log(row)
            this.tableData[row.subscript - 1].amount = (row.price * row.number).toFixed(2)
            if(row.symbol == '美元$'){
                this.tableData[row.subscript - 1].conversion = (row.price * row.number).toFixed(2)
            }else{
                this.syChange1(row)
            }
        },
        // 计算金额
        amountChange1(row) {
            this.tableData1[row.subscript - 1].amount = (row.price * row.number).toFixed(2)
            if(row.symbol == '美元$'){
                this.tableData1[row.subscript - 1].conversion = (row.price * row.number).toFixed(2)
            }else{
                this.syChange(row)
            }
        },
        syChange1(row){
            var myDate = new Date();
            var tYear = myDate.getFullYear();
            var tMonth = myDate.getMonth();

            var m = tMonth + 1;
            if (m.toString().length == 1) {
            m = "0" + m;
            }
            let time =  tYear +'-'+ m;
            if(row.symbol == '美元$'){
                this.tableData[row.subscript - 1].conversion = (row.price * row.number).toFixed(2)
            }else {
                let data = {
                    currency:row.symbol == '人民币￥'?1:2,
                    strdate:time
                }
                exchange(data).then(res => {
                    if(res.code == 200){
                         this.tableData[row.subscript - 1].conversion = (this.tableData[row.subscript - 1].amount / Number(res.rows[0].exchange)).toFixed(2)
                    }
                })
            }
        },
        syChange(row){
            var myDate = new Date();
            var tYear = myDate.getFullYear();
            var tMonth = myDate.getMonth();

            var m = tMonth + 1;
            if (m.toString().length == 1) {
                m = "0" + m;
            }
            let time =  tYear +'-'+ m;
            if(row.symbol == '美元$'){
                this.tableData1[row.subscript - 1].conversion = row.price * row.number
            }else {
                let data = {
                    currency:row.symbol == '人民币￥'?1:2,
                    strdate:time
                }
                exchange(data).then(res => {
                    if(res.code == 200){
                        this.tableData1[row.subscript - 1].conversion = (this.tableData1[row.subscript - 1].amount / Number(res.rows[0].exchange)).toFixed(2)
                    }
                })
            }
        },
        // 确定
        sure() {
        if(this.form.comment == ''){
            this.form.comment == '已阅'
        }
        commSure(this.form).then(res => {
            if(res.code == 200){
                this.visComment = false
                this.getList()
                this.$message.success('提交成功')
            }
            })
        },
        // 打开周报弹窗
        getComment() {
            this.form = {
                comment:'',
                weeklyId:this.$route.query.id,
                userId:this.$store.state.user.userId
            }
            this.visComment = true
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
            if (index === 0) {
                sums[index] = '总价';
                return;
            }
            if(column.property === 'conversion'){
                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                        return (prev + curr).toFixed(2);
                    } else {
                        return (prev).toFixed(2);
                    }
                    }, 0);
                    sums[index] += ' 元';
                } else {
                    sums[index] = 'N/A';
                }
            }
            });

            return sums;
        },
        // 获取详情
        getEd() {
            detalii(this.$route.query.id).then(res => {
                if(res.code == 200){
                   this.tableData = res.data.tabularData;
                   this.lastTabularData1 = res.data.lastTabularData1
                   this.tableData1 = res.data.tabularData1;
                   this.form = res.data.weekly;
                }
            })
        },
        save() {
            let data = {
                weekly:this.form,
                tabularData:this.tableData,
                tabularData1:this.tableData1,
                weeklyId:this.$route.query.id?this.$route.query.id :null 
            }
            if(data.weekly.type){
                if(data.weekly.type == 0){
                    data.weekly.type = 2
                }
            }
            if(this.$route.query.id){
                ed(data).then(res => {
                    if(res.code == 200){
                        this.$message.success('提交成功')
                        this.$router.go(-1)
                    }
                })
            }else {
                check().then(res => {
                    add(data).then(res => {
                        if(res.code == 200){
                            this.$message.success('提交成功')
                            this.$router.go(-1)
                        }
                    })
                })

            }
        }
    }
}
</script>

<style>

</style>